<!-- 手术页面主内容区域 -->
<template>
  <div id="MainSurgeryContent" class="mainContent">
    <ul class="cbp_tmtimeline" v-if="data.length">
      <li>
        <div class="circle"></div><span class="time">手术预约</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>主刀医生： <span>{{operationData.ID_DOC_Surgery}}</span></p>
              <p>预约时间： <span>{{operationData.Time_Order}}</span></p>
              <p>确认手术安排时间： <span>{{operationData.Time_Confirm}}</span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
      <li>
        <div class="circle"></div><span class="time">术前准备</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>签署《手术知情同意书》：<span>{{operationData.Time_Sign}}</span></p>
              <p>麻醉科室术前访视：<span>{{operationData.Interview_Text}}</span></p>
              <p>手术术前检查 <span></span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
      <li>
        <div class="circle"></div><span class="time">术前交接</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>ICU手术与交接单<span></span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
      <li>
        <div class="circle"></div><span class="time">手术进程</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>入室手术： <span>{{operationData.Time_InSurgery}}</span></p>
              <p>麻醉开始： <span>{{operationData.Time_StartANA}}</span></p>
              <p>手术开始： <span>{{operationData.Time_StartSurgery}}</span></p>
              <p>手术结束： <span>{{operationData.Time_EndSurgery}}</span></p>
              <p>麻醉结束： <span>{{operationData.Time_EndANA}}</span></p>
              <p>出手术室： <span>{{operationData.Time_OutSurgery}}</span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
      <li>
        <div class="circle"></div><span class="time">术后交接</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>麻醉单<span></span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
      <li>
        <div class="circle"></div><span class="time">术后护理</span>
        <div class="cbp_tmlabel">
          <ul class="list-record clearfix">
            <li class="pull-left">
              <p>术后麻醉预防 <span></span></p>
              <p>术后镇痛记录<span></span></p>
              <p>术后评估<span></span></p>
              <p>智能精神状态检查量表<span></span></p>
            </li>
          </ul>
        </div>
        <div class="circle-bottom"></div>
      </li>
    </ul>
    <loading v-if="isShow && data.length== 0"></loading>
    <noSearch v-if="!isShow && data.length == 0"></noSearch>
  </div>
</template>
<script>
  import { apiGetOperationMessage } from "@/api/api"; // 导入我们的患者列表api接口
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
export default {
     data(){
    return {
      operationData: {},
      patientIdIn: this.$store.getters.ID,
      isShow: true,
      data:[]
    }
  },
  mounted(){
 this.getOperationMessage()
  },
  methods:{
    getOperationMessage(){
     apiGetOperationMessage({
      patientIdIn:this.patientIdIn
      })
       .then(res => {
         this.operationData = {};
         if (res.Status == -1)
         {
           this.isShow = false;
         }
         if (res.Status == 1) {
           this.isShow = true;
           this.data = JSON.parse(res.Data);
            this.operationData = JSON.parse(res.Data)[0]; 
         }
        })
    }
    },
    components: {
      loading,
      noSearch
    },
}
</script>
<style scoped>
 #MainSurgeryContent{
  overflow-y:auto;
  padding:25px 0 20px 10%;
}
.cbp_tmtimeline {
    margin: 5px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}
.cbp_tmtimeline:before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 0;
    width: 1px;
    background: #ccc;
}
.cbp_tmtimeline > li {
    position: relative;
    padding-left:20px;
}
 .cbp_tmtimeline .circle{
    width: 8px;
    height: 8px;
    line-height: 8px;
    position: absolute;
    color: #fff;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #04e2b6;
    text-align: center;
    left: -3px;
    top: 6px;
 }
 .cbp_tmtimeline .circle-bottom{
   width: 8px;
    height: 8px;
    line-height: 8px;
    position: absolute;
    color: #fff;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #04e2b6;
    text-align: center;
    left: -3px;
    bottom: -14px;
 }

  .cbp_tmlabel {
    padding-bottom: 25px;
  }
 .list-record li{
   min-width:350px;
   padding:15px 20px;
   box-shadow:0 0 10px #ccc;
    border-radius:8px;
    margin-top:25px;
    margin-left:15px;
 }
 .list-record li p{
  line-height:30px;
 }
 @media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .list-record li{
   min-width:auto;
   padding:15px 20px;
   box-shadow:0 0 10px #ccc;
    border-radius:8px;
    margin-top:15px;
    margin-left:0;
 }
}
</style>
